<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
    >
    </el-cascader>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
export default {
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      area1: ""
    };
  },

  methods: {
    handleChange(value) {
      console.log(this.selectedOptions);
      let str = "";
      if (this.selectedOptions.length >= 3) {
        str = `${CodeToText[this.selectedOptions[0]] || ""}/${CodeToText[
          this.selectedOptions[1]
        ] || ""}/${CodeToText[this.selectedOptions[2]] || ""}`;
      } else {
        console.error("selectedOptions.value does not have enough elements");
      }
    }
  }
};
</script>
<style scoped></style>
